<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true">
        <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="startAdd">发布</el-button>

      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

      <el-table-column align="center" label="公告标题" prop="noticeTitle"/>

      <el-table-column align="center" label="创建时间" prop="createTime"/>

      <el-table-column align="center" label="更新时间" prop="updateTime"/>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="startEditNoticeInfo(scope.row)">编辑</el-button>
          <el-button type="primary" size="small" @click="deleteNoticeInfoItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogFormVisible" width="65%">
      <el-form :inline="true" status-icon>

        <el-row type="flex" justify="left">
          <el-col :span="22">
            <el-form-item label="* 公告标题 " label-width="12em">
              <el-input v-model="dialogModel.noticeTitle" clearable class="filter-item" style="width: 20em;" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="left">
          <el-col :span="22">
            <el-form-item label="* 公告内容" label-width="12em">
              <template slot-scope="scope">
                <editor :init="editorInit" v-model="dialogModel.noticeContent" style="width: 45em;"/>
              </template>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer" type="flex" justify="center">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="confirm(); dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listNoticeInfo, createNoticeInfo, updateNoticeInfo, deleteNoticeInfo } from '@/api/noticeInfo'
import { fileUpload } from '@/api/release'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Editor from '@tinymce/tinymce-vue'

export default {
  name: 'NoticeInfo',
  components: { Pagination, Editor },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20
      },
      downloadLoading: false,
      dialogFormVisible: false,
      dialogType: 1,
      dialogTitle: '',
      dialogModel: {},
      fileList: [],
      editorInit: {
        language: 'zh_CN',
        convert_urls: false,
        plugins: [
          'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
        ],
        toolbar: [
          'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
          'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fontsizeselect fullscreen'
        ],
        fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = { 'file': blobInfo.blob() }
          fileUpload(formData).then(response => {
            if (response.data['resultCode'] == 1) {
              success(response.data['data'])
            } else {
              failure('上传失败！')
            }
          }).catch(() => { })
        }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      listNoticeInfo(this.listQuery).then(response => {
        this.list = response.data.data.list
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    startEditNoticeInfo(model) {
      this.dialogFormVisible = true
      this.dialogType = 2
      this.dialogTitle = '编辑'
      this.dialogModel = model
    },
    confirm() {
      if (this.dialogType == 1) {
        createNoticeInfo(this.dialogModel).then(response => {
          this.getList()
        })
      } else if (this.dialogType == 2) {
        updateNoticeInfo(this.dialogModel).then(response => {
          this.getList()
        })
      }
    },
    doFileUpload(file) {
      fileUpload(file).then(response => {
        this.dialogModel.bannerImg = response.data.data
        this.$forceUpdate()
      }).catch(() => {
        this.listLoading = false
      })
    },
    startAdd() {
      this.dialogFormVisible = true
      this.dialogType = 1
      this.dialogTitle = '添加'
      this.dialogModel = {}
    },
    deleteNoticeInfoItem(startupPageId) {
      this.$confirm('确定删除:  ？')
        .then(_ => {
          const resetData = { 'id': startupPageId }
          deleteNoticeInfo(resetData).then(response => {
            this.getList()
          })
        })
        .catch(_ => {})
    },
    getTypeStr(type) {
      if (type == 1) {
        return '育儿知识轮播广告位'
      }
      return ''
    }
  }
}
</script>
